<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>统计查询</title>
		<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../css/app.css" />
		<link rel="stylesheet" href="../lib/table/bootstrap-table.css" />
		<link rel="stylesheet" href="../lib/table/bootstrap-table-reset.css" />
		<link rel="stylesheet" href="../lib/datepicker/css/bootstrap-datepicker3.css" />
		<link rel="stylesheet" href="../lib/nprogress/nprogress.css" />
		<style>
			.hte-table .fixed-table-toolbar{
				padding:0 5px;
			}
		</style>
	</head>
	<body>
		<div class="hte-viewport" hte-app="app1" hte-app-init="init">
			<div hte-view class="hte-container" hte-layout hte-layout-auto>
				<div class="hte-layout hte-layout-fill">
				<div class="hte-panel hte-fixed hte-table"  >
					<div id="toolbar">
						<button id="add" class="btn btn-success" >
				            <i class="glyphicon glyphicon-plus"></i> 新建
				        </button>
				        <button id="edit" class="btn btn-primary" disabled>
				            <i class="glyphicon glyphicon-edit"></i> 编辑
				        </button>
				        <button id="remove" class="btn btn-danger" disabled>
				            <i class="glyphicon glyphicon-remove"></i> 删除
				        </button>
				    </div>
				    <table id="table"
				    	   data-classes="table table-hover table-clickable hte-data-table"
				           data-toolbar="#toolbar"
				           data-search="true"
				           data-pagination="true"
				           data-id-field="id"
				           data-page-list="[10, 25, 50, 100, ALL]"
				           data-show-footer="false"
				           data-side-pagination="server"
				           data-url="../users.json">
				    </table>
				</div>
				</div>
			</div>
		</div>
		<script src="../lib/jquery-1.9.1.min.js"></script>
		<script src="../js/hte.js"></script>
		<script src="../js/app.js"></script>
		<script src="../lib/table/bootstrap-table.js"></script>
		<script src="../lib/table/bootstrap-table-zh-CN.js"></script>
		<script src="../lib/datepicker/js/bootstrap-datepicker.js"></script>
		<script src="../lib/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
		<script src="../lib/nprogress/nprogress.js"></script>
		<script src="../../app/HteApp.js"></script>
		<script>
		var $table = $('#table'),
	        $remove = $('#remove'),
	        $edit = $('#edit'),
	        selections = [];
			function init(){
		        $table.bootstrapTable({
					clickToSelect: true,
					height:200,
		            columns: [{
		                        field: 'state',
		                        checkbox: true,
		                        align: 'center',
		                        valign: 'middle'
		                    }, {
		                        title: '编号',
		                        field: 'id',
		                        align: 'center',
		                        valign: 'middle',
		                        sortable: true
		                    }, {
		                        field: 'name',
		                        title: '名称',
		                        sortable: true,
		                        align: 'center'
		                    }, {
		                        field: 'age',
		                        title: '年龄',
		                        sortable: true,
		                        align: 'center'
		                    }, {
		                        field: 'gender',
		                        title: '性别',
		                        align: 'center'
		                }, {
		                        field: 'phone',
		                        title: '联系电话',
		                        align: 'center'
		                }, {
		                        field: 'address',
		                        title: '籍贯',
		                        align: 'center'
		                }]
		        });
		         $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
		            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
					$edit.prop('disabled', !($table.bootstrapTable('getSelections').length == 1));
		            // save your data, here just save the current page
		            selections = getIdSelections();
		            // push or splice the selections if you want to save all data selections
		        });
		        
		        $remove.click(function () {
		        	parent.HteOS.Messager.confirm("提示","确定要删除么?",function(btn){
		        		if(btn != 'yes') return ;
		        		var ids = getIdSelections();
			            $table.bootstrapTable('remove', {
			                field: 'id',
			                values: ids
			            });
			            $remove.prop('disabled', true);
		        	});
		        });
		        $edit.click(function(){
		        	HteApp.start({
							id : 'curdEdit',
							name : '编辑用户',
							mode : 'window',
							path : parent.HteOS.basePath + 'examples/curd/edit.html',
							icon : parent.HteOS.basePath + 'images/logo.png',
							width:500,
							height:400,
							resizable : false,
							maximizable : false,
							refresh : true,
							onClose : function(extra){
								 $table.bootstrapTable('reload');
							}
					});
		        });
			}
			
			function getIdSelections() {
		        return $.map($table.bootstrapTable('getSelections'), function (row) {
		            return row.id
		        });
		    }
			
		</script>
	</body>
</html>
